<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>换绑手机号</title>
		<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
		<link rel="stylesheet" href="__INDEX__/css/style.css" />
		<link rel="stylesheet" href="__INDEX__/css/member.css" />
	</head>
	
    <style>
     	.icon-dianhua:before,.icon-yanzhengyanzhengma:before{color: white;}
     	.mem_bar_nav {box-shadow: 0 0px 3px #2783e7;}
     	.mui-bar-nav{-webkit-box-shadow: 0 0px 3px #ccc;}
     	.mui-bar-nav~.mui-content{padding-top: 160px;}
     	.login_formbox .mui-input-row{margin-bottom: 1rem;}
    </style>

	<body> 
		<header class="mui-bar mui-bar-nav">
			<a class=" mui-icon mui-icon-left-nav mui-pull-left" href="JavaScript:history.go(-1)"></a>
			<h1 class="mui-title">换绑手机号</h1>
		</header>
		<div class="mui-content login_con" style="background: #2783e7;">
			<form id='login-form' class="login_formbox">
				<div class="mui-input-row">
					<label><span class="iconfont icon-dianhua"></span></label>
					<input id='mobile' name="mobile" type="number" class="mui-input-clear mui-input" placeholder="请输入手机号码">
				</div>

				<div class="mui-input-row fl_yanzm">
					<div class="left clearfix">
						<label><span class="iconfont icon-yanzhengyanzhengma"></span></label>
						<input id='yzm' name="yzm" type="text" class="mui-input-clear mui-input" placeholder="请输入验证码">
					</div>
					<a href="javascript:;" id="send_code">获取验证码</a>
				</div>

			</form>
			<div style="width: 80%;margin: 0 auto;margin-top: 1rem;">
				<button class="mui-btn mui-btn-block login_btn" id="btn" style="color: #2783e7;">确认</button>
			</div>
		</div>
	</body>

</html>
<script src="__INDEX__/js/jquery.js"></script>
<script src="__INDEX__/js/mui.min.js"></script>
<script> 
	var onoff = true;
	//获取验证码
	$('#send_code').click(function() {
		//false就不能发送
		if(!onoff) {
			return;
		}
		onoff = false;
		//点击玩按钮干什么?
		//发验证码? 
		// 1-给谁发? 手机号码
		var phone = $("#mobile").val();
		
		if(phone == '') {
			mui.toast('手机号码不能为空'); 
			onoff = true;
			return;
		}
		var reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/; //验证规则
		if(!reg.test(phone)) {
			mui.toast('手机号码格式不正确');
			onoff = true;
			return;
		}
		$.ajax({
			type:"post",
			//请求的url
			//注意，如果我们使用路由器的情况下，我们需要设置一下本地服务器的ip地址
			url: "{:url('index/index/verify_code')}",
			//请求的过程中传递过去的参数 json
			data: {
				mobile: phone,
			},
			//成功了的回调，并且带有返回值
			success: function(data) {
				mui.toast(data.msg);
				var num = 60;
				var timer = setInterval(function() {
					num--;
					if(num == 0) {
						$('#send_code').text('发送验证码');
						//定时器停了
						clearInterval(timer);
						onoff = true;
					} else {
						$('#send_code').text(num + 'S');
					}
				}, 1000); // 1000 毫秒==1秒
			}
		})
	});
	
	$('#btn').click(function(){
		var phone = $('#mobile').val(); 
    	var yzm = $('#yzm').val();
    	var reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/; //验证规则  
    	if(!phone){
    		mui.toast('请填写手机号码');
			return false;
    	}
		if(!reg.test(phone)) {
			mui.toast('手机号码格式不正确'); 
			return;
		}
    	if(yzm.trim() == '') {
			mui.toast('验证码不能为空');
			return;
		} 
		btn.disabled = true;
		setTimeout(function() {
			btn.disabled = false;
		}, 1500);
		$.ajax({
			url: "{:url('index/member/mobile')}",
			data: $('#login-form').serialize(),
			type: 'post',
			async: false,
			success: function(res) { 
			    if(res.code == 200) {
                  mui.toast(res.msg); 
                  window.location.href = "/index/member/index";
                } else {
                  mui.toast(res.msg);
                }
			}
		})
	});
</script>